<script setup>
    import { ArrowLeft,CircleCloseFilled  } from '@element-plus/icons-vue'
    import { ref,reactive, onMounted } from 'vue'
    import {index,update}  from '../../api/user.js'
    import { ElMessage } from 'element-plus'
    
    const state = reactive({
        users:'',
        form:{},
    });
    const handleSetDown = ()=>{
    
    }
    const visible = ref(false)
   
    const edit = (item)=>{
        visible.value = true
        state.form = item;
    }
   
    const onSubmit = ()=>{
      update(state.form).then(res=>{
          if(res.code == 200) {
             ElMessage({
                message: '已更新.',
                type: 'success',
              })
          }
      });
    }
    const handleDel = ()=>{
    
    }
    
    onMounted(()=>{
         index().then(res=>{
             if(res.code == 200) {
                 state.users = res.data.data
             }
         });
    });
    
    </script>
    
    <template>
       <el-table :data="state.users" stripe style="width: 100%">
        <el-table-column type="selection" width="55" />
        <el-table-column prop="id" label="ID" width="180" />
        <el-table-column prop="user_name" label="昵称" width="180" />
        <el-table-column prop="head_img" label="头像" width="180" >
           <template #default="scope">
            <el-image :src="scope.row.head_img" style="width:100px;height:100px" />
          </template>
        </el-table-column>
        <el-table-column prop="mobile" label="手机号" width="180" />
         <el-table-column prop="status" label="状态" width="180" >
      <template #default="scope">
        <el-tag v-if="scope.row.status == 1" type="success">正常</el-tag>
        <el-tag v-if="scope.row.status == 2" type="danger">禁用</el-tag>
     </template>
    </el-table-column>
        <el-table-column fixed="right" label="操作" width="120">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="edit(scope.row,scope.$index)">修改</el-button>
          </template>
        </el-table-column>
      </el-table>

       <el-dialog v-model="visible" :show-close="false">
    <template #header="{ close, titleId, titleClass }">
      <div class="my-header">
        <h4 :id="titleId" :class="titleClass">修改用户!</h4>
        
      </div>
    </template>
      <el-form :model="state.form" label-width="120px">
        <el-form-item label="备注" >
          <el-input v-model="state.form.mark" />
        </el-form-item>
		<el-form-item label="手机号" >
		  <el-input v-model="state.form.mobile" />
		</el-form-item>
        <el-form-item label="用户状态">
                 <el-radio-group v-model="state.form.state" class="ml-4">
                    <el-radio :label="1" size="large">正常</el-radio>
                    <el-radio :label="2" size="large">禁用</el-radio>
                </el-radio-group>
               </el-form-item>
          </el-form>
       <el-form-item>
        <el-button type="primary" @click="onSubmit">保存</el-button>
        <el-button type="danger" @click="visible = false">
          <el-icon class="el-icon--left"><CircleCloseFilled /></el-icon>
          关闭
        </el-button>
      </el-form-item>
  </el-dialog>
    </template>
    
    <style scoped>
    .read-the-docs {
      color: #888;
    }
    </style>
    